<style type="text/css">
	.progress-bar-down li{border-bottom: 1px solid #dcdcdc;padding: 0 30px 0 10px;background-color: #fff;position: relative;}
	.progress-bar-down li .fa{position: absolute;right: 10px;top: 12px;}
	.progress-bar-down li .fa-chevron-down,.progress-bar-down li.active .fa-chevron-up{display: block;}
	.progress-bar-down li .fa-chevron-up,.progress-bar-down li.active .fa-chevron-down{display: none;}
	.progress-bar-down .progress-deteil-wrap{height: 36px;overflow: hidden;}
	.progress-bar-down li.active .progress-deteil-wrap{height: auto;}
	.progress-bar-down .progress-deteil{line-height: 24px;padding-top: 6px;min-height: 36px;}
	.progress-deteil>span{margin-right: 4px;}
	.progress-deteil>span:last-child{margin-right: 0;}
	
	.gpsLocation{float: right;position: relative;padding-right: 24px;}
	.gpsLocation>.fa{display: block;top: 12px;color: #eb6100;}
	.titlePhoto{font-weight: normal;padding: 10px;}
	.photo-list li{float: left;width: 64px;height: 64px;position: relative;border:1px solid #cdcdcd;margin: 0 5px 10px;}
	.photo-list li>img{width: 100%;height: 100%;}
	.photo-list>li .fa-times-circle{position: absolute;right: -8px;top: -8px;color: #ff6666;font-size: 18px;}
	.photo-list .departureBtn{border:none;}
	.digital-input:after,.photo-list:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}

	/*二维码展示*/
	.display-code{position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: #000;background-color: #000;background-size: contain;}

	/**mint-message-box*/
	.mint-msgbox {
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		background-color: #fff;
		width: 85%;
		border-radius: 3px;
		font-size: 16px;
		-webkit-user-select: none;
		overflow: hidden;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transition: .2s;
		transition: .2s;
	}
	.mint-msgbox-header {
		padding: 15px 0 0;
	}
	.mint-msgbox-content {
		padding: 10px 20px 15px;
		border-bottom: 1px solid #ddd;
		min-height: 36px;
		position: relative;
	}
	.mint-msgbox-input {
		padding-top: 15px;
	}
	.mint-msgbox-input input {
		border: 1px solid #dedede;
		border-radius: 5px;
		padding: 4px 5px;
		width: 100%;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: none;
	}
	.mint-msgbox-input input.invalid {
		border-color: #ff4949;
	}
	.mint-msgbox-input input.invalid:focus {
		border-color: #ff4949;
	}
	.mint-msgbox-errormsg {
		color: red;
		font-size: 12px;
		min-height: 18px;
		margin-top: 2px;
	}
	.mint-msgbox-title {
		text-align: center;
		padding-left: 0;
		margin-bottom: 0;
		font-size: 16px;
		font-weight: 700;
		color: #333;
	}
	.mint-msgbox-message {
		color: #999;
		margin: 0;
		text-align: center;
		line-height: 36px;
	}
	.mint-msgbox-btns {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		height: 40px;
		line-height: 40px;
	}
	.mint-msgbox-btn {
		line-height: 35px;
		display: block;
		background-color: #fff;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		margin: 0;
		border: 0;
	}
	.mint-msgbox-btn:focus {
		outline: none;
	}
	.mint-msgbox-btn:active {
		background-color: #fff;
	}
	.mint-msgbox-cancel {
		width: 50%;
		border-right: 1px solid #ddd;
	}
	.mint-msgbox-cancel:active {
		color: #000;
	}
	.mint-msgbox-confirm {
		color: #26a2ff;
		width: 50%;
	}
	.mint-msgbox-confirm:active {
		color: #26a2ff;
	}
	.msgbox-bounce-enter {
		opacity: 0;
		-webkit-transform: translate3d(-50%, -50%, 0) scale(0.7);
		transform: translate3d(-50%, -50%, 0) scale(0.7);
	}
	.msgbox-bounce-leave-active {
		opacity: 0;
		-webkit-transform: translate3d(-50%, -50%, 0) scale(0.9);
		transform: translate3d(-50%, -50%, 0) scale(0.9);
	}

</style>
<template>

	<div class="container" v-title data-title='报备详情'>
		<Header title="报备详情"></Header>
		<ul class="report-info-list">
			<li>
				<div class="template-list-right">
					<div class="title">
						<div class="template-list-left">
							<div class="label-title">客户姓名</div>
							<div class="contrls">{{cusPre.name}}</div>
						</div>
					</div>
					<div class="content">
						<a href="javascript:;" class="editBtn" @click="toEditCustomer"><i class="fa fa-edit"></i>编辑</a>
					</div>
				</div>
			</li>
			<li>
				<div class="template-list-right" @click="seeCode">
					<div class="title">
						<div class="template-list-left">
							<div class="label-title">查看二维码</div>
						</div>
					</div>
					<div class="content">
						<i class="fa fa-qrcode" style="color: #ff8e3b;"></i>
					</div>
				</div>
			</li>
			<li>
				<div class="template-list-left">
					<div class="label-title">性别</div>
					<div class="contrls">{{cusPre.genderName}}</div>
				</div>
			</li>
			<li>
				<div class="template-list-right">
					<div class="title">
						<div class="template-list-left">
							<div class="label-title">联系电话</div>
							<div class="contrls">{{cusPre.mobile}}</div>
						</div>
					</div>
					<div class="content">
						<a href="javascript:;" class="dialBtn" @click="callCus"><i class="fa fa-phone"></i>拨打</a>
					</div>
				</div>
			</li>
			<li v-if="isSpecialShow">
				<div class="template-list-right">
					<div class="title">
						<div class="template-list-left">
							<div class="label-title">GPS坐标</div>
							<div class="contrls">{{cusPre.longitude}}, {{cusPre.latitude}}</div>
						</div>
					</div>
					<div class="content">
						<a @click="openLocation()">查看地图</a>
					</div>
				</div>
			</li>
			<li v-if="isSpecialShow">
				<div class="unified-template">
					<ul class="photo-list" style="margin-top: 10px;">
						<li v-for="(row, index) in fileList">
							<img v-bind:src="row.url" @click="previewImage(index)">
						</li>
					</ul>
				</div>
			</li>
			<li v-if="!isSpecialShow">
				<div class="template-list-left">
					<div class="label-title">期望带看时间</div>
					<div class="contrls">{{cusPre.visitProtecDate}}</div>
				</div>
			</li>
			<li>
				<div class="template-list-left">
					<div class="label-title">客户描述</div>
					<div class="contrls-column">
						{{cusPre.remark}}
					</div>
				</div>
			</li>
		</ul>
		<div class="line bor-b"></div>
		<ul class="report-info-list">
			<li>
				<div class="title">
					<div class="template-list-left">
						<div class="label-title">意向楼盘</div>
						<div class="contrls">{{cusPre.premisesName}}</div>
					</div>
				</div>
			</li>
		</ul>
		<div class="progress-bar-warp">
			<ul class="progress-bar">
				<li v-for="(row, index) in customerArray" class="bar-list-line" :class="{'active':row.isActive}">
				    <span class="spot" ></span>{{row.name}}
		    	</li>
			</ul>
			<span>当前状态：{{currentStatus}}</span>
		</div>
		<ul class="progress-bar-down">
			<li v-for="(row,index) in listFlowUp" @click="analysis(index)">
				<div class="progress-deteil-wrap">
					<div class="progress-deteil">
						<span>{{row.staffName}}</span>
						<span>{{row.createTime}}</span>
						<span>{{row.remark}}</span>
					</div>
				</div>
				<i class="fa fa-chevron-down"></i>
				<i class="fa fa-chevron-up"></i>
			</li>
		</ul>
		<!-- <ul class="progress-bar-info progress-bar-down">
			<li v-for="(row,index) in listFlowUp">
				<div class="template-row-list">
					<label class="label-title" style="width: 165px;">
						<span class="name" style="width: 35px; display: inline-block;">{{row.staffName}}</span>
						{{row.createTime}}
					</label>
					<div class="row-content">
						 {{row.remark}}
					</div>
				</div>
			</li>

		</ul> -->
		<!-- 二维码图片 -->

		<div class="display-code animated bounceIn" v-if="isShow" :style="codeUrl" @click="isShow=false"></div>
		<button class="btn-block" v-show="buttonStatus.cxbbShow" @click="cxbbSubmit">重新报备</button>
		<button class="btn-block" v-if="cusPre.customerStatus==-1&&cusPre.disableType==3&&cusPre.afreshNum!=1&& toReportFlag"   @click="cxfqSubmit">重新发起</button>
		<button class="btn-block" v-show="buttonStatus.xgjShow"  @click="toFollowUp">写跟进</button>
		<button class="btn-block" v-show="buttonStatus.ssShow" @click="toAppeal">申诉</button>
		<button class="btn-block"  @click="toModal">复制</button>
	</div>
</template>
<script>
    import {MessageBox } from 'mint-ui';
	var wx=require('weixin-js-sdk')
	export default {
		data() {
			return {
				cusPre: {},
				listFlowUp: [],
				customerArray: [{name:'报备',isActive:false},{name:'带看',isActive:false},{name:'认筹',isActive:false},{name:'认购',isActive:false},{name:'签约',isActive:false},{name:'结佣',isActive:false}],
				currentStatus:'',
				buttonStatus:{
					cxbbShow:false,
					xgjShow:true,
					ssShow: false
				},
				isShow:false,
				isSpecialShow:false,
				codeUrl:'',
				latitude:'',
				longitude:'',
				fileList:[],
				toReportFlag :true
			}
		},
		mounted: function() {
			this.findCusPreimeseInfo();
			this.flowUpList();
			this.wxConfig();

			$("#goble_menu_div").hide();
			
		},
		methods: {
			initBtn(){
				var _self = this;
				var customerStatus = this.cusPre.customerStatus
				var complaintsNumber = this.cusPre.complaintsNumber
				var disableType = this.cusPre.disableType
				//-1，报备无效，初步满足报备条件
				if("-1"==customerStatus){
					if(complaintsNumber && complaintsNumber > 0){
						//存在申诉次数，并且次数大于0，不能再次申诉
						_self.buttonStatus.ssShow = false;
					}else if(disableType==1){
						_self.buttonStatus.ssShow = true;
					}
				}
				if("8" == customerStatus || "9" == customerStatus){
					_self.buttonStatus.cxbbShow = true;
				}
			},
			analysis(index){
				var barUl = document.getElementsByClassName("progress-bar-down")[0];
				var appointLiAll = barUl.getElementsByTagName("li")
				var appointLi = barUl.getElementsByTagName("li")[index];
				var deteilAppoint = appointLi.getElementsByClassName('progress-deteil-wrap')[0];
				for(var i=0;i<appointLiAll.length;i++){
					if(i != index){
						appointLiAll[i].setAttribute('class','');
					}
				}
				if(appointLi.getAttribute('class') == "active"){
					appointLi.setAttribute('class','');
				}else{
					appointLi.setAttribute('class','active');  
				}
			},
			findCusPreimeseInfo() {
				var _self = this;
				var body = {};
				body.params = {
					id: _self.$route.params.id
				}
				var url = this.utilHelper.apiUrl + "/api/getCPDetail";
				_self.$http.post(url, body).then((response) => {
					var data = response.body.resData;
					if (data.result == '1') {
						_self.cusPre = data.cpDto;
						if(_self.cusPre.reportType == "2"){
							_self.isSpecialShow = true;
							_self.latitude = _self.cusPre.latitude; 
					        _self.longitude = _self.cusPre.longitude; 
					        _self.getImages(_self.cusPre.id);
						}
	                    this.customerStatuList();
						this.initBtn();
					}else {
						layer.alert(data.resultMsg);
					}
				}, (response) => {
					layer.alert("请求接口异常! ");
				});
			},
			flowUpList() {
				var _self = this;
				var body = {};
				body.params = {
					customerPremisesId: _self.$route.params.id
				};
				var url = this.utilHelper.apiUrl + "/api/getCPFollowList";
				_self.$http.post(url, body).then((response) => {
					if (response.body.resData.result == '1') {
						_self.listFlowUp = response.body.resData.followList;
					}else {
						layer.alert(response.body.resData.resultMsg);
					}
				}, (respones) => {
					layer.alert("请求接口异常! ");
				});
			},
			customerStatuList() {
				var _self = this;
				var url = this.utilHelper.apiUrl + '/api/getCPFollowStatusList';
				var body = {};
				body.params = {
					id: _self.$route.params.id
				};
				_self.$http.post(url, body).then((response) => {
					var obj = response.body.resData;
					var index = obj.map.index;
					var currentStatus = obj.map.currentStatus;
					if(index){
						for(var i=0;i<index;i++){
							_self.customerArray[i].isActive = true;	
						}
					}
					_self.currentStatus = currentStatus
					//_self.customerArray = response.body.resData;
				});
			},
			toAppeal(){
                //若为游客则弹出绑定对话框
                this.tourist();

				var id=this.$route.params.id;
				var customerStatus = this.cusPre.customerStatus;
				var complaintsNumber = this.cusPre.complaintsNumber;
				var params = {};
				params.id = id;
				params.customerStatus = customerStatus;
				params.complaintsNumber = complaintsNumber;
				this.$router.push({name: 'appeal', params: params})
			},
			toFollowUp(){
                //若为游客则弹出绑定对话框
                this.tourist();

				var id=this.$route.params.id;
				this.$router.push({name: 'followUp', params: {id:id}})
			},
			toEditCustomer(){
				var id = this.$route.params.id;
				var name = this.cusPre.name;
				var remark = this.cusPre.remark;
				var genderName = this.cusPre.genderName;
				var gender = "";
				if("男" == genderName){
					gender = "0";
				}else if("女" == genderName){
					gender = "1";
				}
				var params = {};
				params.id = id;
				params.name = name;
				params.gender = gender;
				params.remark = remark;
				this.$router.push({name: 'editCustomer', params:params})
			},
			cxbbSubmit(){
                //若为游客则弹出绑定对话框
                this.tourist();

				var _self = this;
				var id = this.$route.params.id;
				var staffId = window.sessionStorage.getItem(_self.utilHelper.appAgency+"_userId");
				var params = {};
				params.cusPreId = id;
				params.staffId = staffId;
				var body  = {};
				body.params = params;
				var url = this.utilHelper.apiUrl+'/api/reportAgain';
				this.$http.post(url, body).then((response)=>{
					console.info(response)
					var body = response.body;
					if(body.result == 1){
						layer.msg("提交成功",{
							time: 2000
						}, function(){
							_self.$router.push({name: 'declareDetail',params:{id:params.id}})
							//_self.$router.push({name: 'declare',params:{id:params.id}})
						});
					}else{
						_self.btnShow = true;
						layer.msg(body.errorMsg, {
							time: 2000
						});
					}
				});
			},
			cxfqSubmit(){
                //若为游客则弹出绑定对话框
                this.tourist();

                var _self = this;
                MessageBox.prompt('重新发起',{
                    inputType:'textarea',
                    inputPlaceholder:'请填写重新发起理由',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
				}).then(({ value, action }) => {
                    if(action == 'confirm'){
                        _self.saveReport(value);
                    }
                }).catch(err=>{
                    if(err == 'cancel'){

					}
				});
			},
			callCus(){
				var _self = this;
				var mobile = _self.cusPre.mobile;
				if(mobile){
					if(mobile.indexOf("****") >= 0){
						layer.msg("该号码为隐号，不能拨打", {
							time: 2000
						});
						return false;
					}
					window.location.href="tel:"+_self.cusPre.mobile;
				}else{
					layer.msg("手机号不存在", {
						time: 2000
					});
				}
			},
			seeCode(){
				var sId = this.$route.params.id;
				var body = {};
				body.params = {content:sId};
				var url = this.utilHelper.apiUrl + "/api/createQRCode";
				this.$http.post(url,body).then((response)=>{
                    var data = response.body.resData;
					this.codeUrl = "background: url("+JSON.stringify(data.qrCode)+") no-repeat center #000"
					this.isShow = true;
				});
			},
			wxConfig(){
                //获取微信js_sdk授权
                var currUrl = location.href.split('#')[0];
                var body = {};
                body.params={
                	url:currUrl
                };
                var url = this.utilHelper.apiUrl+'/api/js_ticket';
                this.$http.post(url,body).then((response)=>{
                    var data = response.body.resData;
					wx.config({
                      debug: false,
                      appId: data.appid, // 必填，公众号的唯一标识
                      timestamp: data.time, // 必填，生成签名的时间戳
                      nonceStr: data.noncestr, // 必填，生成签名的随机串
                      signature: data.signature,// 必填，签名，见附录1
                      jsApiList: ['openLocation']
                	});
                });
            },
			openLocation() {
				var _self = this;
				wx.openLocation({
			       	latitude: parseFloat(_self.latitude),
			      	longitude: parseFloat(_self.longitude),
			      	name: _self.cusPre.premisesName,
			      	//address: '',
			      	scale: 15,
			      	//infoUrl: ''
			    });
			},
			//获取图片列表
			getImages(id){
				var _self = this;
				var body = {};
				body.params =  {"id":id};
				var url = this.utilHelper.apiUrl+'/api/getFiles';
				_self.$http.post(url,body).then((response)=>{
					console.info(response)
					var body = response.body.resData;
					if(body.result == 1){
						_self.fileList = body.resData;
					}
				});
			},
			//图片预览
			previewImage(index){
				var _self = this;
				var imgList = new Array();
				for(var i = 0; i < _self.fileList.length; i++){
					imgList.push(_self.fileList[i].url);
				}
				wx.previewImage({
			      	current: imgList[index],
			      	urls: imgList
			    });
			},
			//重新发起
            saveReport(remark) {
                var _self = this;
                var reqData={
                    cusPreId:this.cusPre.id,
                    remark:remark
                }
                var body = {};
                body.params = reqData;
                var url = this.utilHelper.apiUrl+'/api/reportAgain';
                _self.$http.post(url,body).then((response)=>{
                    var body = response.body.resData ;
                    if(body.result=="1"){
                        //重新加载客户信息
                        this.findCusPreimeseInfo();
                        this.flowUpList();
                        layer.msg("提交成功!", {
                            time: 1000
                        }, function(){
                           _self.toReportFlag =false;
                        });
                    }else{
                        layer.msg(body.resultMsg);
                    }
                },(response)=>{
                    layer.alert("请求异常!");
                });
            },

            //查看模板
            toModal(){
                this.$router.push({
                    name: 'DeclareModel',
					params:{
                        cusPre:this.cusPre
					}
                })
			}
		}
	}
</script>